<template>
	<view class="content">
		<u-navbar back-text="" slot="left" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">感兴趣记录</view>
		</u-navbar>
		<!--list start-->
		
		<block v-if="cardList && cardList.length>0">
			<view class="master-block" v-for="(item,index) in cardList" :key="index" @click="JumpNext(item)">
				<view class="master-item">
					<view class="master-faceItem poser dis-row">
						<!--头像处理start-->
						<view class="faceItem-ico poser">
							<image :src="item.avatar?item.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'"></image>
							<label>{{item.staffTypeStr}}</label>
						</view>
						<!--头像处理over-->
						<!--顶部右侧标题文字开始-->
						<view class="faceText dis-clm">
							<!--置顶信息start-->
							<view class="faceText-t1 dis-row">
								<view class="zhidding" v-if="item.top">置顶</view>
								<view class="master-name">{{item.nickName?item.nickName:'先生'}}</view>
								<block v-if="item.isRealName">
									<label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/user-real.svg"></image></label>
									<text>实名认证</text>
								</block>
							</view>
							<!--置顶信息over-->
							<view class="master-userinfo dis-row">
								<text v-if="item.gender">
									<block v-if="item.gender==1">男</block>
									<block v-else-if="item.gender==2">女</block>
								</text>
								<text v-if="item.age">{{item.age}}岁</text>
								<text v-if="item.nation">{{item.nation}}</text>
							</view>
						</view>
						<!--顶部右侧标题文字结束-->
						<!--是否在线开始-->
						<view class="zpList-right dis-clm" v-if="item.salary">
							<view class="zplistrv-s1"><label>{{item.salary}}</label>{{item.salaryUnit?item.salaryUnit:'元'}}</view>
							<view class="zpList-s2">期望薪资</view>
						</view>
						<!--是否在线结束-->
					</view>
					<!--标签列表开始-->
					<view class="bloc-small">
						<label v-if="item.workYear">{{item.workYear}}年工龄</label>
						<label v-if="item.workType1">{{item.workType1}}</label>
						<label v-if="item.mastery">{{item.mastery}}</label>
					</view>
					<!--标签列表结束-->
					<!--底部开始哦-->
					<view class="master-zpList dis-clm poser">
						<view class="zpList-child dis-row"><text>{{item.mastery?item.mastery:''}}</text></view>
						<view class="zpList-right dis-clm">
							<view class="zpList-s2">查看详情</view>
						</view>
					</view>
					<!--底部结束-->
				</view>
			</view>
		</block>
		<!--list over-->
		<block v-else>
			<view class="empty-img">
				<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
			</view>
		</block>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import Index from '@/common/index-model.js'
	import fun from '@/common/publicFun.js'
	let index=new Index();
	export default {
		data() {
			return {
				orderId:0,
				orderinfo:{},
				cardList:[],
				time:fun.formatDate(new Date,"yyyy-MM-dd hh:mm:ss")
			};
		},
		onLoad(opt) {
			this.orderId=opt.orderId;
			this.getOrderInfo()
			this.getCardList()
		},
		onPullDownRefresh() {
			this.time=fun.formatDate(new Date,"yyyy-MM-dd hh:mm:ss");
			this.getCardList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//获取详情
			getOrderInfo() {
				let url="client/job/find/details/"+this.orderId
				index.getPublicUserMember({},url,'get',res=>{
					if(res.data.code == 200 && res.data.success){
						this.orderinfo = res.data.result;
					}
				})
			},
			getCardList(){//查询通知消息
				let url='/client/message/record/of/interest'
				let cardList=[];
				index.getPublicUserMember({time:this.time,orderId:this.orderId},url,'post',res=>{
					if(res.data.code==200){
						res.data.result.forEach((item,ind)=>{
							if(item.skills){
								item.skillsList=index.strTrim(item.skills,',').split(',');
							}							
							cardList.push(item);
						})
						this.cardList=cardList;
					}
				})
			},
			strHandle(str,char=','){
				return index.strTrim(str,char);
			}
		}
	}
</script>

<style lang="scss" scoped>
@import url("index.css");
@import url("@/static/css/publics.css");
::v-deep {
	.u-navbar--fixed {	  
		background: #fff;
		& > view {
			background: transparent !important;
		}
		.leftText {
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
		}
		.u-nav-slot{ display: flex;}
	}
	.con{ padding: 0 20rpx;}
	.con .title{ color: #0F0F0F; font-size: 36rpx; margin-bottom: 20rpx; font-weight: bold;}
	.con .date{ color: #A1A1A1; font-size: 24rpx; margin-bottom: 20rpx;}
	.con .content{ color: #424242; font-size: 28rpx;}
}

.list-item{width: 100%; background: #fff; min-height: 200rpx;}
/* 师傅 */
.master-block{width: 100%;background-color: #ffffff; border-bottom: 1rpx #f3f3f3 solid;}
.master-item{padding: 20rpx;}

.faceItem-ico{width: 104rpx;height: 104rpx;margin-right: 20rpx;border-radius: 6rpx;}
.faceItem-ico image{width: 104rpx;height: 104rpx; border-radius: 6rpx;}
.faceItem-ico label{display: inline-block;background-color: rgba(15, 15, 15,0.6);border-radius: 0px 0px 6px 0px;width: 44rpx;height: 28rpx;color: #ffffff;font-size: 20rpx;
position: absolute;right: 0rpx;bottom: 0rpx;line-height: 28rpx;text-align: center;}
.zhidding{display: inline-block;background-color: #FF5964;color: #FFFFFF;font-size: 24rpx;border-radius: 6rpx;text-align: center;width: 64rpx;height: 38rpx;
line-height: 38rpx;margin-right:15rpx;}
.faceText-t1{ height: 38rpx; margin-bottom: 20rpx;}
.faceText-t1 label{display: inline-block;padding: 0rpx 10rpx;}
.faceText-t1 label image{width: 40rpx;height: 40rpx;}
.master-name{font-size: 36rpx;color: #0F0F0F;font-weight: bold;line-height: 38rpx;}
.faceText-t1 text{font-size: 24rpx;color: #A1A1A1;line-height: 38rpx;}
.master-userinfo{font-size: 26rpx;color: #424242;}
.master-userinfo text{display: inline-block;padding: 0rpx 15rpx; position: relative;}
.master-userinfo text::before{ content: ''; height: 20rpx; width: 1rpx; background: #A1A1A1; position: absolute; right: 0; top: 14rpx;}
.master-userinfo text:last-child::before{ display: none;}

.master-t3{position: absolute;right: 0rpx;top: 0rpx;line-height: 38rpx;color: #A1A1A1;font-size: 24rpx;}
.master-t3 view{padding:15rpx 10rpx 0rpx 0rpx;}
.master-t3 view label{display: block;width: 12rpx;height: 12rpx;background-color: #43B729;border-radius: 50%;}

.master-zpList{line-height: 40rpx;}
.zpList-child label{display: inline-block;padding: 0rpx 20rpx 0rpx 0rpx;color: #A1A1A1;font-size: 28rpx;}
.zpList-child text{color: #A1A1A1;font-size: 28rpx;}
.zpList-right{position: absolute;right:0rpx;top: 20rpx;font-size: 24rpx;color: #A1A1A1;line-height: 38rpx; text-align: right;}
.master-zpList .zpList-right{position: absolute;right:0rpx;top: 20rpx;font-size: 24rpx;color: #0F0F0F;line-height: 38rpx; text-align: right;}

.zplistrv-s1{ text-align: right; justify-content: right;}
.zplistrv-s1 label{font-size: 36rpx; color: #FF5964; font-weight: bold; line-height: 38rpx;}
.zpList-s2{padding-left: 38rpx;}

.bloc-small{width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;padding: 20rpx 0rpx;}
.bloc-small label{display: inline-block;padding: 7rpx 10rpx;border-radius: 6rpx;background-color:#F7F7F7;font-size: 28rpx;color: #424242;margin-right: 15rpx;}
.bloc-small label.noactive{color: #FF5964;}
</style>